<!--
边框
    border-width
        - 边框粗细（宽度）
        - 默认单位：px
    border-style
        - 边框样式
        - 测试时宽度大一点，效果才能观察清楚
        - none（默认，无边框）、hidden（隐藏边框）
        - dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）
        - groove（3D凹槽框）、ridge（3D菱形框）、inset（3D凹边）、outset（3D凸边）
    border-color
        - 边框颜色（预定义颜色、十六进制、rgb代码）
        - 默认黑色

    border: 宽度 样式 颜色;
        - 复合写法（简写），没有顺序要求，但上面那个是约定俗成的
        - 只写宽度是无效的，必须加上样式

    四种边框
        border-top: 宽度 样式 颜色;   // 下面同理
        border-right
        border-bottom
        border-left

关于表格边框
    1）table、th、td都要设置
    2）相邻边框必须合并【1+1=1】，否则【1+1=2】相邻的地方显得更粗！
        table,th,td{ 
            border: 1px solid;
            border-collapse: collapse;  // 合并相邻边框
        }
-->
<style>
    div {
        width: 200px;
        height: 200px;

        /* border-width: 10px;
        border-style: solid;
        border-color: blue; */

        /* 利用层叠性，层叠了上、左 */
        /* 注意顺序（四边--》上边/左边），否则层叠失败 */
        border: 20px groove red;
        border-top: 10px dotted green;
        border-left: 20px dashed blue;
    }
</style>

<div></div>
